<template>
	<view class="container">
		<!-- 服务项目 -->
		<view class="input-item">
			<text class="label">服务项目</text>
			<uni-data-picker placeholder="请选择服务类型" popup-title="请选择服务类型" :localdata="items" v-model="serviceCategoryId"
				@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed"  :map="{text:'name',value:'id'}">
			</uni-data-picker>
		</view>

		<!-- 服务电话 -->
		<view class="input-item">
			<text class="label">服务电话</text>
			<input class="input" placeholder="请输入服务电话" v-model="userTelephone" />
		</view>

		<!-- 选择服务地区 -->
		<view class="input-item">
			<text class="label">选择服务地区</text>
			<input class="input" placeholder="请输入服务地区" v-model="area" />
		</view>

		<!-- 输入地址 -->
		<view class="input-item">
			<text class="label">地址</text>
			<input class="input" placeholder="请输入地址" v-model="orderAddress" />
		</view>

		<!-- 选择上门日期 -->
		<view class="input-item">
			<text class="label">选择上门日期</text>
			<picker mode="date" @change="handleDateChange">
				<view class="input">{{ reserveDate || '请选择上门日期' }}</view>
			</picker>
		</view>

		<!-- 选择上门时间 -->
		<view class="input-item">
			<text class="label">选择上门时间</text>
			<picker mode="time" @change="handleTimeChange">
				<view class="input">{{ reserveTime || '请选择上门时间' }}</view>
			</picker>
		</view>

		<!-- 服务备注信息 -->
		<view class="input-item">
			<text class="label">备注信息</text>
			<textarea class="textarea" placeholder="服务备注信息（非必填）" v-model="notes"></textarea>
		</view>

		<!-- 立即预约按钮 -->
		<view class="btn-wrapper">
			<button class="btn" @tap="submitBooking">
				{{ this.orderNum ? '修改预约' : '立即预约' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNum: '',
				serviceCategoryId: '', // 服务类型id
				userTelephone: '', // 用户电话
				area: '', // 服务地区
				orderAddress: '', // 上门地址
				reserveDate: '', // 预约日期
				reserveTime: '', // 预约时间
				notes: '', // 备注
				checkToken: '', // Token存储
				items: [{
						text: "",
						value: "",
						children: [{
								text: "",
								value: ""
							},
						]
					},
				],
			}
		},
		onLoad() {

			const orderData = uni.getStorageSync('orderData');
			if (orderData) { // 确保 orderData 存在
				this.orderNum = orderData.orderNum;
				this.serviceCategoryId = orderData.serviceCategoryId;
				
				this.userTelephone = orderData.userTelephone;
				this.area = orderData.area;
				this.orderAddress = orderData.orderAddress;

				// 使用 split 分割时间
				const [datePart, timePart] = orderData.reserveTime.split(' ');

				// 直接赋值给 reserveDate 和 reserveTime
				this.reserveDate = datePart; // 只需保留日期部分
				this.reserveTime = timePart; // 只需保留时间部分

				this.notes = orderData.notes;

				// 移除订单数据
				uni.removeStorageSync('orderData');
				
				return this.$u.get('/serviceCategory/getAll', {}).then(res => {
					if (res) {
						this.items = res.data;
					}
				});
			}
		},
		onShow() {
			this.getToken();
		},
		methods: {

			onnodeclick(e) {
				
			},
			onpopupopened(e) {
				
				return this.$u.get('/serviceCategory/getAll', {}).then(res => {
					if (res) {
						// this.items[0].text = res.data[0].name;
						this.items = res.data;
					}
				});
			},
			onpopupclosed(e) {
				
			},
			onchange(e) {
				
			},

			getToken() {
				return this.$u.get('/auth/getToken', {
					scene: 'getToken'
				}).then(res => {
					if (res.data) {
						this.checkToken = res.data;
						return this.checkToken;
					}
				});
			},

			// 日期选择变化处理
			handleDateChange(e) {
				this.reserveDate = e.detail.value; // 选择的日期
			},

			// 时间选择变化处理
			handleTimeChange(e) {
				this.reserveTime = e.detail.value; // 选择的时间
			},

			submitBooking() {
				var that = this;
				const formattedReserveTime = `${this.reserveDate} ${this.reserveTime}`; // 合并日期和时间

				this.$u.post('/order/createOrder', {

					serviceCategoryId: this.serviceCategoryId,
					userTelephone: this.userTelephone,
					area: this.area,
					orderAddress: this.orderAddress,
					reserveTime: formattedReserveTime, // 提交合并的日期和时间
					notes: this.notes,
					orderNum: this.orderNum, // 添加 orderNum
				}, {
					Authorization: that.checkToken
				}).then(res => {
					console.log(res)
					if (res.code == 1000) {
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						});
						// 预约成功，清空表单数据
						this.orderNum = '';
						this.serviceCategoryId = '';
						this.userTelephone = '';
						this.area = '';
						this.orderAddress = '';
						this.reserveDate = '';
						this.reserveTime = '';
						this.notes = '';
						this.orderNum = '';

						// 跳转到“我的”页面
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/my' // 修改为你的“我的”页面路径
							});
						});
					} else {
						uni.showToast({
							title: '预约失败，请刷新页面',
							icon: 'none'
						});
					}
				}).catch(() => {
					uni.showToast({
						title: '网络错误，请刷新页面',
						icon: 'none'
					});
				});
			}
		},
		mounted() {
			this.getToken();
		}
	}
</script>

<style scoped>
	/* 样式保持不变 */
	.container {
		padding: 16px;
		background-color: #fff;
	}

	.input-item {
		margin-bottom: 15px;
	}

	.label {
		font-size: 16px;
		color: #333;
		margin-bottom: 6px;
		font-weight: bold;
	}

	.input,
	.textarea {
		width: 100%;
		padding: 10px;
		font-size: 14px;
		border: 1px solid #ddd;
		border-radius: 6px;
		background-color: #f9f9f9;
	}

	.textarea {
		height: 80px;
	}

	.btn-wrapper {
		margin-top: 15px;
	}

	.btn {
		width: 100%;
		padding: 10px;
		background-color: #007aff;
		color: white;
		font-size: 14px;
		text-align: center;
		border-radius: 6px;
		border: none;
		transition: background-color 0.3s;
	}

	.btn:active {
		background-color: #005bb5;
	}
</style>